<template>
	<div class="form-container" style="padding-top: 0px !important;">
		<el-form ref="formModel" :model="model" :rules="rules" :label-width="labelWidth" :inline="false">
			<h4 class="orange">{{comLan["baseInfo"]}}</h4>
			<el-row>
				<!-- <slot name="ParentIDBefore"></slot>
		            <slot name="ParentID">
		                <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
		                    <el-form-item prop="ParentID" :label="keyLan['ParentID']+':'">
		                        <el-input-number type="number" pattern="\d*" v-model.number="model.ParentID"></el-input-number>
		                    </el-form-item>
		                </el-col>
		            </slot>
		            <slot name="ParentIDAfter"></slot> -->
				<slot name="EnumSysStoreTypeBefore"></slot>
				<slot name="EnumSysStoreType">
					<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12"
						v-if="(!isAdd&&model.EnumSysStoreType==0)||user.isMainStore==false">
						<el-form-item prop="EnumSysStoreType" :label="keyLan['EnumSysStoreType']+':'">
							<span v-html="getLabel(model.EnumSysStoreType,EnumSysStoreType)"></span>
						</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" v-else>
						<el-form-item prop="EnumSysStoreType" :label="keyLan['EnumSysStoreType']+':'">
							<el-radio-group v-model="model.EnumSysStoreType">
								<el-radio v-for="item in EnumSysStoreType" :key="item.Value" :value="item.Value"
									:label="item.Value">
									{{enumLanTxt(item.Label)}}
								</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</slot>
				<slot name="EnumSysStoreTypeAfter"></slot>
				<slot name="SysStoreNameBefore"></slot>
				<slot name="SysStoreName">
					<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
						<el-form-item prop="SysStoreName" :label="keyLan['SysStoreName']+':'">
							<!--不靠店铺名称登录,所以都可以改名称-->
							<!--:disabled="model.EnumSysStoreType==0&&!user.isAdminStore"-->
							<el-input v-model="model.SysStoreName">
							</el-input>
						</el-form-item>
					</el-col>
				</slot>
				<slot name="SysStoreNameAfter"></slot>

				<slot name="EnumStatusBefore"></slot>
				<slot name="EnumStatus">
					<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
						<el-form-item prop="EnumStatus" :label="keyLan['EnumStatus']+':'">
							<el-radio-group v-model="model.EnumStatus"
								:disabled="(model.EnumSysStoreType==0&&!user.isAdminStore)||(!isAdd&&user.sysStoreID==model.SysStoreID)">
								<el-radio v-for="item in EnumStatus" :key="item.Value" :value="item.Value"
									:label="item.Value">
									{{enumLanTxt(item.Label)}}
								</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</slot>
				<slot name="EnumStatusAfter"></slot>
			</el-row>
			<el-row>
				<slot name="DirectorBefore"></slot>
				<slot name="Director">
					<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
						<el-form-item prop="Director" :label="keyLan['Director']+':'">
							<el-input v-model="model.Director"></el-input>
						</el-form-item>
					</el-col>
				</slot>
				<slot name="DirectorAfter"></slot>
				<slot name="PhoneNumberBefore"></slot>
				<slot name="PhoneNumber">
					<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
						<el-form-item prop="PhoneNumber" :label="keyLan['PhoneNumber']+':'">
							<el-input v-model="model.PhoneNumber"></el-input>
						</el-form-item>
					</el-col>
				</slot>
				<slot name="PhoneNumberAfter"></slot>

				<!-- <slot name="MaxStoreCountBefore"></slot>
				<slot name="MaxStoreCount">
					<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" v-if="user.isAdminStore">
						<el-form-item prop="MaxStoreCount" :label="keyLan['MaxStoreCount']+':'">
							<el-input-number type="number" pattern="[\d,]+\.?[\d]*"
								v-model.number="model.MaxStoreCount">
							</el-input-number>
						</el-form-item>
					</el-col>
				</slot>
				<slot name="MaxStoreCountAfter"></slot> -->

				<!-- <slot name="ProvinceBefore"></slot>
		            <slot name="Province">
		                <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
		                    <el-form-item prop="Province" :label="keyLan['Province']+':'">
		                        <el-input v-model="model.Province"></el-input>
		                    </el-form-item>
		                </el-col>
		            </slot>
		            <slot name="ProvinceAfter"></slot>
		            <slot name="CityBefore"></slot>
		            <slot name="City">
		                <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
		                    <el-form-item prop="City" :label="keyLan['City']+':'">
		                        <el-input v-model="model.City"></el-input>
		                    </el-form-item>
		                </el-col>
		            </slot>
		            <slot name="CityAfter"></slot>
		            <slot name="DistrictBefore"></slot>
		            <slot name="District">
		                <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
		                    <el-form-item prop="District" :label="keyLan['District']+':'">
		                        <el-input v-model="model.District"></el-input>
		                    </el-form-item>
		                </el-col>
		            </slot>
		            <slot name="DistrictAfter"></slot>
		            <slot name="AddressBefore"></slot>
		            <slot name="Address">
		                <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
		                    <el-form-item prop="Address" :label="keyLan['Address']+':'">
		                        <el-input v-model="model.Address"></el-input>
		                    </el-form-item>
		                </el-col>
		            </slot>
		            <slot name="AddressAfter"></slot>
		            <slot name="LongitudeBefore"></slot>
		            <slot name="Longitude">
		                <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
		                    <el-form-item prop="Longitude" :label="keyLan['Longitude']+':'">
		                        <el-input-number type="number" pattern="[\d,]+\.?[\d]*" v-model.number="model.Longitude">
		                        </el-input-number>
		                    </el-form-item>
		                </el-col>
		            </slot>
		            <slot name="LongitudeAfter"></slot>
		            <slot name="LatitudeBefore"></slot>
		            <slot name="Latitude">
		                <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
		                    <el-form-item prop="Latitude" :label="keyLan['Latitude']+':'">
		                        <el-input-number type="number" pattern="[\d,]+\.?[\d]*" v-model.number="model.Latitude">
		                        </el-input-number>
		                    </el-form-item>
		                </el-col>
		            </slot>
		            <slot name="LatitudeAfter"></slot> -->

				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
					<el-form-item prop="TheContent" :label="keyLan['TheContent']+':'">
						<!-- <el-input type="textarea" :rows="2" v-model="model.TheContent" style="width: 100%;">
							</el-input> -->
						<editor ref="editor" v-model="model.TheContent"></editor>
					</el-form-item>
				</el-col>

				<slot name="RemarkBefore"></slot>
				<slot name="Remark">
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
						<el-form-item prop="Remark" :label="keyLan['Remark']+':'">
							<el-input type="textarea" :rows="2" v-model="model.Remark" style="width: 100%;"></el-input>
						</el-form-item>
					</el-col>
				</slot>
				<slot name="RemarkAfter"></slot>
			</el-row>

			<h4 class="orange">{{comLan["other"]}}</h4>
			<el-row>
				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
					<el-form-item prop="Province"
						:label="keyLan['Province']+'/'+keyLan['City']+'/'+keyLan['District']+':'">
						<el-cascader ref="myCity" size="large" :options="regionData" v-model="selectedOptions"
							@change="handleChange" style="width:100%;">
						</el-cascader>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="24" :md="20" :lg="20" :xl="20">
					<el-form-item :label="keyLan['Address']+':'" prop="Address">
						<div class="el-input" style="width:100%">
							<input autocomplete="off" type="text" rows="2" validateevent="true" class="el-input__inner"
								id="suggestId" v-model="model.Address" @keyup.enter="searchByAddress" />
						</div>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="24" :md="4" :lg="4" :xl="4" style="text-align: center;">
					<el-button @click="searchByAddress" icon="search">根据地址查询</el-button>
				</el-col>
				<el-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10">
					<el-form-item :label="keyLan['Longitude']+':'" prop="Longitude">
						<el-input v-model="model.Longitude" @keyup.native.enter="searchByL"></el-input>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10">
					<el-form-item :label="keyLan['Latitude']+':'" prop="Latitude">
						<el-input v-model="model.Latitude" @keyup.native.enter="searchByL"></el-input>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="24" :md="4" :lg="4" :xl="4" style="text-align: center;">
					<el-button @click="searchByL" icon="search">根据经纬度查询</el-button>
				</el-col>
				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
					<!-- <div id="containerBusinessAdd"
		                        style="margin: 5px; width: 98%; height: 450px; border: 1px solid gray;"></div> -->
					<baidu-map :scroll-wheel-zoom="true" :inertial-dragging="true" :continuous-zoom="true"
						@click="clickBaidumap" :zoom="zoom" :center="centerPoint" @moving="zoomend" @moveend="zoomend"
						@zoomend="zoomend" @ready="baiduMapReady">
						<!--地图视图-->
						<bm-view style="width:100%;height:100%;min-height:450px"></bm-view>
						<!--点标注-->
						<bm-marker :position="markPoint" :dragging="true" :zIndex="100" @dragend="clickBaidumap"
							@rightclick="infoWindowOpen" @click="infoWindowOpen">
							<!-- animation="BMAP_ANIMATION_BOUNCE" -->
							<!-- :icon="{ url: markerIcon, size: { width: 34, height: 34 } }" -->
							<bm-info-window :show="isShowInfo" @close="infoWindowClose" @open="infoWindowOpen">
								省市区:{{pcd.p + "/" + pcd.c + "/" + pcd.d}}
								<br />
								地址:{{address}}
								<br />
								<el-button type="text" @click="useThisAddress">使用此地址</el-button>
								<el-button type="text" @click="zoomDefault" style="padding-left: 10px;">默认缩放</el-button>
							</bm-info-window>
						</bm-marker>
						<!--比例尺-->
						<bm-scale anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-scale>
						<!--缩放-->
						<bm-navigation :showZoomInfo="true" :enableGeolocation="false" anchor="BMAP_ANCHOR_TOP_RIGHT">
						</bm-navigation>
						<!--地图类型 只能这两个,另外两个要JS报错-->
						<bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"
							type="BMAP_MAPTYPE_CONTROL_HORIZONTAL">
						</bm-map-type>
						<!--缩略图-->
						<bm-overview-map anchor="BMAP_ANCHOR_BOTTOM_LEFT" :isOpen="true"></bm-overview-map>
						<!--定位 有BUG,点了之后JS就一直报错-->
						<!-- <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="false" :autoLocation="false"
		                            @locationSuccess="clickBaidumap" :offset="{width: 0,height: 0}">
		                        </bm-geolocation> -->
						<!--全景 有BUG无法运行-->
						<!-- <bm-panorama :offset="{width: 80,height: 0}"></bm-panorama> -->
					</baidu-map>
				</el-col>
			</el-row>
			<br />
		</el-form>

		<div style="display: block;text-align: center;">
			<el-button v-if="isAdd" @click="resetThisVal('model')">{{comLan["btnReset"]}}</el-button>
			<el-button @click="closeCurrent">{{comLan["btnCancel"]}}</el-button>
			<el-button type="primary" @click="save" :loading="loading">{{comLan["btnSave"]}}</el-button>
		</div>
	</div>
</template>

<script>
	import common from "@/common/common.js";
	import js from "./js.js";
	import exAddEdit from "@/System/Auto/SysStore/SysStoreAddEdit.vue";
	import {
		regionData
	} from 'element-china-area-data'

	export default {
		name: "SysStoreAddRedict",
		components: {
			exAddEdit
		},
		mixins: [common.baseVM, js],
		data() {
			var baseGoodsContent = '<p style="text-align: center;"></p>';
			return {
				model: {
					SysStoreID: 0,
					ParentID: null,
					EnumSysStoreType: null,
					SysStoreName: null,
					Director: null,
					PhoneNumber: null,
					Province: null,
					City: null,
					District: null,
					Address: null,
					// Longitude: null,
					// Latitude: null,
					Longitude: 103.856563,
					Latitude: 30.082526,
					EnumStatus: 1,
					Remark: null,
					MaxStoreCount: 5,
					TheContent: baseGoodsContent
				},

				regionData: regionData,
				selectedOptions: [],

				markerIcon: null, //标注图片
				isShowInfo: false,
				address: '',
				zoom: 13,
				markPoint: {
					lng: 0,
					lat: 0
				},
				centerPoint: { //故意分离的,不然居中有BUG
					lng: 0,
					lat: 0
				},
				pcd: {
					p: '',
					c: '',
					d: ''
				},

				mapReady: false,
				mapReadyCallback: null
			}
		},
		methods: {
			init() {
				this.loadBeforeValSuccess = false;
				this.resetVal("model");
				var query = this.getQuery();
				var id = parseInt(query["id"]);
				if (isNaN(id)) id = 0;
				this.isAdd = id == 0;

				var initMapInfo = () => {
					this.setReadyCallbak(() => {
						this.$nextTick(() => {
							this.searchByL();
						});
					});
				};

				if (this.isAdd) { //新建
					//this.loadBeforeVal();

					initMapInfo();
					return;
				}
				this.get("api/System/SysStoreAdd?id=" + id).then(data => {
					this.model = data.Result;
					// var ref = this.$refs.exAddEdit;
					// ref.setPcd();
					initMapInfo();
				});
			},
			closeCurrent() {
				this.refreshList("/System/SysStoreList");
			},
			save() {
				this.formValidate('formModel', () => {
					var post = JSON.parse(JSON.stringify(this.model));
					this.loading = true;
					this.post('api/System/SysStoreAdd', post).then(data => {
						this.showToast(data.Message, "success");
						this.loading = false;

						this.clearBeforeVal();
						this.closeCurrent();
					}).catch((error) => {
						this.loading = false;
					});
				});
			},


			handleChange() {
				var city = this.regionData;
				for (var i = 0; i < city.length; i++) {
					if (city[i].value == this.selectedOptions[0]) {
						this.model.Province = city[i].label
						for (var j = 0; j < city[i].children.length; j++) {
							if (city[i].children[j].value == this.selectedOptions[1]) {
								this.model.City = city[i].children[j].label
								for (var m = 0; m < city[i].children[j].children.length; m++) {
									if (
										city[i].children[j].children[m].value ==
										this.selectedOptions[2]
									) {
										this.model.District = city[i].children[j].children[m].label
									}
								}
							}
						}
					}
				}
				//console.log(this.model.Province, this.model.City, this.model.District)
			},
			setPcd() {
				var p = this.model.Province;
				var c = this.model.City;
				var d = this.model.District;
				var r = [];
				var city = this.regionData;
				for (var i = 0; i < city.length; i++) {
					if (city[i].label == p) {
						r.push(city[i].value);
						for (var j = 0; j < city[i].children.length; j++) {
							if (city[i].children[j].label == c) {
								r.push(city[i].children[j].value)
								for (var m = 0; m < city[i].children[j].children.length; m++) {
									if (city[i].children[j].children[m].label == d) {
										r.push(city[i].children[j].children[m].value);
									}
								}
							}
						}
					}
				}
				this.selectedOptions = r;
			},

			setReadyCallbak(callback) {
				//console.log("setReadyCallbak", this.mapReady, callback);
				if (!callback || typeof(callback) != 'function') return;
				if (this.mapReady) {
					callback();
					return;
				}
				this.mapReadyCallback = callback;
			},
			baiduMapReady({
				BMap,
				map
			}) {
				//console.log("baiduMapReady");
				this.mapReady = true;
				if (!!this.mapReadyCallback && typeof(this.mapReadyCallback) == 'function') {
					this.mapReadyCallback();
					//console.log("baiduMapReady", this.mapReadyCallback);
				}
			},
			infoWindowClose() {
				this.isShowInfo = false
			},
			infoWindowOpen() {
				this.isShowInfo = true
			},
			areaIsNull() {
				var r = this.selectedOptions == null ||
					this.selectedOptions.length == 0 ||
					(this.selectedOptions.length == 3 &&
						(this.selectedOptions[0] == null || this.selectedOptions[0] == '') &&
						(this.selectedOptions[1] == null || this.selectedOptions[1] == '') &&
						(this.selectedOptions[2] == null || this.selectedOptions[2] == ''));
				return r;
			},
			initMapInfo(first) {
				var point = new BMap.Point(this.model.Longitude, this.model.Latitude);
				this.markPoint = point;
				//这里解决居中BUG,也解决了点击经纬度查询没居中的问题
				this.centerPoint = new BMap.Point(this.model.Longitude, this.model.Latitude);
				let geocoder = new BMap.Geocoder(); //创建地址解析器的实例
				geocoder.getLocation(point, (rs) => {
					if (!!rs && !!rs.address && !this.model.Address) {
						this.model.Address = rs.address;
					}
					this.address = !!rs ? rs.address : "";
					if (!!rs && !!rs.address) {
						if (!!first) {
							setTimeout(() => {
								//this.zoom = 12;
								//窗口运动过了解决了窗口bm-info-window不显示的BUG
								//这里解决居中BUG,也解决了点击经纬度查询没居中的问题
								var latTemp = parseFloat(parseFloat(this.model.Latitude) + 0.001);
								this.centerPoint = new BMap.Point(this.model.Longitude, latTemp);
							}, 10);
						}
						this.isShowInfo = true;
						var addComp = rs.addressComponents;
						if (this.areaIsNull()) {
							if (!!addComp) {
								this.model.Province = addComp.province;
								this.model.City = addComp.city;
								this.model.District = addComp.district;

								this.setPcd();
							}
						}
						this.pcd = {
							p: addComp.province,
							c: addComp.city,
							d: addComp.district
						};
					} else {
						alert("您选择坐标没有解析到结果!");
					}
				});
			},
			zoomend(e) {
				// const {lng, lat} = e.target.getCenter()
				// this.center.lng = lng
				// this.center.lat = lat
				this.zoom = e.target.getZoom();
			},
			zoomDefault() {
				this.zoom = 13;
				var latTemp = parseFloat(parseFloat(this.model.Latitude) + 0.001);
				this.centerPoint = new BMap.Point(this.model.Longitude, latTemp);
				this.$nextTick(() => {
					this.centerPoint = new BMap.Point(this.model.Longitude, this.model.Latitude);
				});
			},
			useThisAddress() {
				this.model.Address = this.address;
				this.model.Province = this.pcd.p;
				this.model.City = this.pcd.c;
				this.model.District = this.pcd.d;

				this.setPcd();
			},
			clickBaidumap(result) {
				if (!result || !result.point) return;
				this.model.Latitude = parseFloat(result.point.lat);
				this.model.Longitude = parseFloat(result.point.lng);

				this.initMapInfo();
			},
			searchByAddress() {
				var address = this.model.Address;
				var keyword = !!address ? address : "四川省成都市";
				var getCityString = this.model.City;
				if (!getCityString) {
					getCityString = this.model.Province;
					if (!getCityString) getCityString = "四川省";
				}
				let myGeo = new BMap.Geocoder(); //创建地址解析器的实例
				//console.log(keyword);
				myGeo.getPoint(keyword, (point) => {
					if (point) {
						this.clickBaidumap({
							point: point
						});
					} else {
						alert("您选择地址没有解析到结果!");
					}
				}, getCityString);
			},

			searchByL() {
				if (this.model.Latitude == null && this.model.Longitude == null) return;
				this.initMapInfo(true);
			},
		}
	}
</script>
